<template>
<div class="top">
  <div class="hello">
    <div class="layout">
      <Header>
        <!-- active-name="1" -->
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-nav">
            <MenuItem  name="a" to="/home/shopping">
              <Icon type="logo-octocat" />
              <font aria-setsize="4" color="red">猫眼电影</font>
            </MenuItem>
            <MenuItem name="b">
              <Icon type="ios-navigate"></Icon>
              西安
            </MenuItem>
            <MenuItem  name="2" to="/"> 首页 </MenuItem>
            <MenuItem  name="3" to="/twopage"> 电影 </MenuItem>
            <MenuItem  name="4" to="/"> 影院 </MenuItem>
            <MenuItem  name="5" to="/"> 演出 </MenuItem>
            <MenuItem  name="6" to="/"> 榜单 </MenuItem>
            <MenuItem  name="7" to="/"> 热点 </MenuItem>
            <MenuItem  name="8" to="/"> 商城 </MenuItem>

            <MenuItem  name="9" to="/">
              <Icon type="md-phone-portrait" />APP下载
            </MenuItem>
            <span v-if="!showinfo"
              ><MenuItem  name="10" to="/login" @click="logined()">
                登陆
              </MenuItem>
              <MenuItem  name="11" to="/regist"> 注册 </MenuItem></span
            >
            <span class="zs" v-if="showinfo"
              >你好{{ uname }}&nbsp;☺&nbsp;<router-link to="order">我的订单</router-link><button
                @click="logout()"
                class="logout"
              >
                注销
              </button></span
            >
            <div class="layout-logo">
              <Input search enter-button placeholder="Enter something..." />
            </div>
          </div>
        </Menu>
      </Header>
    </div>
    <!-- <div class="d1">
      <img class="img1" src="../assets/maoyandy.png" /><span
        v-if="!showinfo"
        class="roulink"
        ><router-link to="login" @click="logined()">登录</router-link
        >&nbsp;&nbsp;<router-link to="regist">注册</router-link></span
      ><span class="zs" v-if="showinfo"
        >你好{{ uname }},<button @click="logout()">注销</button></span
      >
    </div> -->
    <div style="height: 10px"></div>
    <div class="d2"></div>
    <!-- <div class="top"><router-link to="login">登录</router-link>&nbsp;&nbsp;<router-link to="regist">注册</router-link></div> -->
    <div>
      <Carousel autoplay v-model="value2" loop>
        <CarouselItem>
          <div class="demo-carousel">
            <img
              class="iag"
              src="http://qjvplq3iu.hd-bkt.clouddn.com/lb1.jpg"
            />
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">
            <img
              class="iag"
              src="http://qjvplq3iu.hd-bkt.clouddn.com/lb2.jpg"
            />
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">
            <img
              class="iag"
              src="http://qjvplq3iu.hd-bkt.clouddn.com/lb3.jpg"
            />
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">
            <img
              class="iag"
              src="http://qjvplq3iu.hd-bkt.clouddn.com/lb4.jpg"
            />
          </div>
        </CarouselItem>
      </Carousel>
    </div>
    <div class="s1">正在热映</div>
    <div>
      <span class="c1" v-for="s in allData"
        ><img class="ig" v-bind:src="s.mpic" /><button @click="islogin(s.mid)" class="buybtn">
          购票
        </button></span
      >
    </div>
    <div class="s1">即将上映</div>
    <div>
      <span class="c1" v-for="s in allData"
        ><img class="ig" v-bind:src="s.mpic" /><button @click="islogin(s.mid)" class="buybtn">
          购票
        </button></span
      >
    </div>
    <div><img src="../assets/foot.png" /></div>
  </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      allData: {},
      mid: "",
      uname: "",
      showinfo: false,
      value2: 0,
    };
  },
  methods: {
    logout: function () {
      axios.get("api/user/logout").then(res=>{
        this.uname=""
        this.showinfo=false
        // this.$router.get(0)
      })
      // this.uname = "";
      // this.showinfo = false;
    },
    islogin: function (mid) {
      alert(mid);
      if (
        this.uname === null ||
        this.uname === undefined ||
        this.uname === ""
      ) {
        this.$router.push("login");
      } else {
        this.$router.push({ name: "details", params: { mid: mid,uname:this.uname} });
      }
    },
    getAllMovie: function () {
      axios.get("api/movie/getAll").then((res) => {
        console.log(res.data);
        this.allData = res.data;
        console.log(this.allData);
      });
    },
  },
  mounted() {
      axios.get("api/user/loginUser").then((res) => {
      console.log(res);
      this.uname = res.data;
       if(this.uname!==null && this.uname!==""){
      this.showinfo= true
      }}
      )
      // alert(my.uname)
      //  if(this.uname!==null && this.uname!==""){
      // this.showinfo= true
      // }
// this.uname=this.$route.params.uname
//     alert(this.uname)
//      if(this.uname!==null && this.uname!==undefined && this.uname!==""){
//       this.showinfo= true
//       }
    this.getAllMovie();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top{
  margin-left: -137px;
}
.zs {
  font-size: 30px;
  color: orange;
}
.roulink {
  margin-left: 100px;
  font-size: 30px;
}
.img1 {
  width: 115px;
  height: 40px;
  margin-left: -950px;
  margin-top: 10px;
}
.d1 {
  /* background-color: aqua; */
  width: 100%;
  height: 60px;
  border-bottom: red solid 3px;
}
.top {
  background-color: aqua;
  height: 60px;
}
.hello {
  background-color: rgb(167, 173, 132);
}
.ig {
  width: 20%;
  height: 15%;
}
.iag {
  width: 60%;
  height: 10%;
}
.s1 {
  margin-left: 10px;
  font-size: 30px;
  padding-right: 70%;
}
.c1 {
  font-size: 20px;
  color: rgb(90, 20, 220);
}
.logout {
  width: 100px;
  height: 50px;
  margin-top: 6px;
  text-align: center;
  line-height: 50px;
  background-color: #98b898;
}
.layout-logo {
  width: 200px;
  height: 10px;
  background: #5b6270;
  /* border-radius: 3px; */
  float: right;
  position: relative;
  top: 15px;
  right: 150px;
}
.layout-nav {
  /* width: 420px;
  margin: 0 auto; */
  margin-right: 20px;
}
.ivu-layout {
  height: 100%;
}
/* .ivu-menu {
  height: 100%;
} */
.buybtn {
  background-color: #98b898;
  border: none;
  color: #2e2ea3;
}
</style>
